<!--
@ 作者: 阿拉丁矿工 黄传鸿 <hchhyzc@foxmail.com>
-->
<template>
    <div class="h_edit">
        <div class="h_top"></div>
        <div class="h_center">
            <FrameLeft></FrameLeft>
            <FrameMiddle></FrameMiddle>
            <FrameRight></FrameRight>
        </div>
        <div class="h_bottom">
            <text>传鸿组态二维图形版</text>
            <div>{{ tips }}</div>
            <div class="coordinate">
                <div class="coordinate_item">
                    <div class="coordinate_tiele">坐标</div>
                    <div class="coordinate_info">x:{{ coordinate.x }}</div>
                    <div class="coordinate_info">y:{{ coordinate.y }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup  lang="ts">
/* ================================================================================================ */
// 🍀引入
/* ================================================================================================ */
import { FrameLeft } from "../FrameLeft";
import { FrameMiddle } from "../FrameMiddle";
import { FrameRight } from "../FrameRight";
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 引入存储
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
import { storeToRefs } from "pinia";
import { useCanvasStore } from "@/store/canvasStore"; // 画布

/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 使用存储
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
const canvasStore = useCanvasStore(); // 画布

/* ================================================================================================ */
//                                 ★ 变量
/* ================================================================================================ */
/** 解构存储*/
const { tips, coordinate } = storeToRefs(canvasStore);
/* ================================================================================================ */
//                                 ★ 变量
/* ================================================================================================ */

/* ================================================================================================ */
//                                ★ 函数
/* ================================================================================================ */


/* ================================================================================================ */
//                                ★ 钩子函数_挂载后
/* ================================================================================================ */


</script>

<style lang="scss" scoped>
.h_edit {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    overflow: hidden;
    user-select: none;
    background-color: rgb(80, 80, 80);
}

.h_top {
    height: 30px;
    width: 100vw;
    border-bottom: 1px solid rgb(100, 100, 100);
}

.h_center {
    width: 100vw;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    // overflow: hidden;
    user-select: none;

    .h_middle {
        width: 90%;
        height: 100%;
    }
}
// 底部
.h_bottom {
    height: 30px;
    width: 100vw;
    border-top: 1px solid rgb(100, 100, 100);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    user-select: none;
color: #ffffff;
    // 坐标
    .coordinate {
        margin: 0px;
        width: 500px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        font-size: 0.2em;
    }

    // 坐标项目
    .coordinate_item {
        margin: 0px;
        width: 250px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }

    // 坐标名称
    .coordinate_tiele {
        margin: 0px;
        width: 126px;
    }
}
</style>